<template>
    <div class="goods_container">
        <!-- 头部导航 -->
        <div class="topBanner">
            <div class="m-topBar flex">
                <div @click="backhome">
                    <van-icon name="wap-home-o" size="28px" />
                </div>
                <a href="/"><i>网易严选</i></a>
                <div class="right flex">
                    <div @click="goSearch">
                        <van-icon name="search" size="28px" />
                    </div>
                    <div @click="gocart">
                        <van-icon name="shopping-cart-o" size="28px" />
                    </div>

                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in swpList" :key="index">
                    <img :src="item">
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>

        <!-- 价格 -->
        <div class="priceTitle flex">
            <div class="priceleft">
                <p class="time">{{ itemList.promotionDesc }}&nbsp;
                    <!-- <span>|</span>&nbsp;距结束还有{{ itemList.updateTime }} -->
                </p>
                <p class="youhui">￥<span class="one">{{ skuList[0]?.price.basicPrice }}</span><span
                        class="two"></span>&nbsp;&nbsp;<i>{{ skuList[0]?.price.counterPrice }}</i></p>
            </div>
            <div class="priceRight flex_c">
                <img class="logoUrl" src="https://yanxuan.nosdn.127.net/static-union/1678945972c531b5.png">
            </div>
        </div>
        <!-- 其他 -->
        <div class="otherinfo">
            <div class="priceInfo">
                <div class="spmcBanner flex_base">
                    <div class="spmcPrice">
                        <img class="iconUrl" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png">
                        <span class="spmcDesc">Pro会员叠加优惠，再省<span class="spmcEconomizePrice">¥1.3</span>
                        </span>
                        <van-icon name="info-o" size="14px" />
                    </div>
                    <span class="spmcBtn">开通</span>
                </div>
            </div>
            <div class="baseInfo flex">
                <div class="info flex_c">
                    <div class="name">{{ itemList.name }}</div>
                    <div class="simpleBrandInfo flex_base">
                        <div class="ziying">自营</div>
                        <img class="brandLogo"
                            src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"><span
                            class="title">网易严选</span>
                    </div>
                    <div class="desc">推荐理由</div>
                </div>
                <div class="comment single-line">
                    <div class="wrap flex">
                        <div class="info-wrap flex_c">
                            <div class="num">99.8%</div>
                            <div class="com">好评率</div>
                        </div>
                        <van-icon name="arrow" size="14px" />
                    </div>
                </div>
            </div>
            <div class="rcmdBanner">
                <ul>
                    <li class="flex_base" v-for="(item, index) in recommendReason" :key="index">
                        <div class="key">{{ index + 1 }}</div>
                        <div class="recommendReason">{{ item }}</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 选项卡 -->
        <div class="chooseCard">
            <!-- <van-cell  title="领劵" @click="showList = !showList" is-link /> -->
            <van-cell class="mt_5" v-if="skuFreight.title" :title="skuFreight.title + ':' + skuFreight.freightInfo"
                @click="showyoufei = !showyoufei" is-link />
            <!-- <van-cell title="促销" is-link /> -->
            <van-cell v-if="itemList.shoppingReward?.name"
                :title="itemList.shoppingReward?.name + ':' + itemList.shoppingReward?.rewardDesc + itemList.shoppingReward?.rewardValue"
                @click="showgouwufan = !showgouwufan" is-link />
            <van-cell class="mt_5" :title="'规格:' + skuSpecList[0]?.skuSpecValueList[0].value + 'x' + num"
                @click="showguige = !showguige" is-link />
            <!-- <van-cell title="限制" /> -->
            <van-cell title="配送" @click="showpeisong = !showpeisong" is-link>{{ "北京市北京市北京市" }}</van-cell>
            <van-cell title="服务" @click="showfuwu = !showfuwu" is-link>
                <div class="fuwuneirong " v-for="(item, index) in policyList" :key="index">
                    <div>{{ item.title }}</div>
                </div>
            </van-cell>
        </div>
        <!-- 小轮播图 -->
        <div class="nav_sw">
            <van-swipe :loop=true :show-indicators=false autoplay="3000">
                <van-swipe-item>
                    <img
                        src="https://yanxuan.nosdn.127.net/static-union/16811983969d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0" />
                </van-swipe-item>
                <van-swipe-item>
                    <img
                        src="https://yanxuan-item.nosdn.127.net/9ea759c9741edca8188fa444eec92c11.png?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=750x0">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 评论 -->
        <div class="comments mt_5">
            <div class="comment_title">
                <p>用户评价</p>
            </div>
            <div class="comment_content"></div>
        </div>
        <!-- 跳转 -->
        <div class="brandInfo flex_base mt_5">
            <div class="brandInfo_left">
                <img :src="brandInfo.picUrl">
            </div>
            <div class="brandInfo_right">
                <div class="brandInfo_title"><span>{{ brandInfo.title }}</span><van-icon name="arrow" size="16px" /></div>
                <div class="brandInfo_desc">{{ brandInfo.desc }}</div>
            </div>
        </div>
        <!-- 商品参数 -->
        <div class="m-attrCon">
            <div class="attrList">
                <div class="tt">商品参数</div>
                <div class="tt_item flex_base" v-for="(item, index) in attrList" :key="index">
                    <div class="tt_left">{{ item.attrName }}</div>
                    <div class="tt_right">
                        {{ item.attrValue }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 更多 -->
        <div class="more mt_5" v-html="itemDetail.detailHtml">

        </div>

        <!-- 底部购买 -->
        <div class="footer">
            <van-row>
                <van-col span="6">
                    <van-icon class="icon" name="service-o" size="30" />
                </van-col>
                <van-col span="9" class="buy" @click="gobuy">立即购买</van-col>
                <van-col span="9" class="gocar" @click="gocart">加入购物车</van-col>
            </van-row>
        </div>

        <!-- 弹窗 -->
        <!-- 邮费弹窗 -->
        <van-action-sheet v-model:show="showyoufei" :title="skuFreight.title" :round=false>
            <div class="youfeicontent">
                <p class="youfeiTitle">{{ skuFreight.policyList[0].title }}</p>
                <p class="youfeiContent">{{ skuFreight.policyList[0].content }}</p>
            </div>
        </van-action-sheet>
        <!-- 购物返弹窗 -->
        <van-action-sheet v-model:show="showgouwufan" :title="itemList.shoppingRewardRule?.title" :round=false>
            <div class="gouwucontent">
                <div class="rule" v-for="(item, index) in itemList.shoppingRewardRule.ruleList" :key="index">
                    <div class="ruleTitle">{{ item.title }}</div>
                    <div class="ruleContent" v-html="item.content">
                    </div>
                </div>
            </div>
        </van-action-sheet>
        <!-- 配送 -->
        <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="showpeisong = true" />
        <van-popup v-model:show="showpeisong" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="showpeisong = false"
                @finish="onFinish" />
        </van-popup>
        <!-- 服务弹窗 -->
        <van-action-sheet v-model:show="showfuwu" title="标题" :round=false>
            <div class="gouwufuwucontent">
                <div class=" fuwucontent">
                    <div class="rule" v-for="(item, index) in policyList" :key="index">
                        <div class="ruleTitle">
                            {{ item.title }}
                        </div>
                        <div class="ruleContent">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </van-action-sheet>
        <!-- 选择规格弹窗 -->
        <van-action-sheet v-model:show="showguige" :round="false">
            <van-icon class="icon1111" name="cross" @click="showguige = !showguige" />
            <div class="content12">
                <div class="content12_header">
                    <div class="left">
                        <img :src="skuSpecList[0].skuSpecValueList[0].picUrl">
                    </div>
                    <div class="right">
                        <van-tag type="warning" round class="tag">
                            <div class="tags">特价</div>
                        </van-tag>
                        <div class="allprice">
                            <div class="price">价格：¥17.9</div>
                            <span class="oldprice">¥19.9</span>
                        </div>
                        <div class="sku">
                            已选择：
                            <span class="it">请选择规格数量</span>
                        </div>
                    </div>
                </div>
                <div class="content12_content">
                    <div class="spe">
                        <div class="spe_header">{{ skuSpecList[0].name }}</div>
                        <div class="alltab">
                            <div class="tab" v-for="(item, index) in skuSpecList[0].skuSpecValueList" :key="item.id"
                                :class="{ active: index == goodsNum }">
                                <span class="tab_text " @click="goodsFun(index)">{{ item.value }}</span>
                            </div>

                        </div>
                    </div>
                    <div class="num">
                        <div class="num_text">数量</div>
                        <van-stepper v-model="num" integer input-width="64px" button-size="33px" />
                    </div>
                </div>

                <div class="footer">
                    <van-row>
                        <van-col span="6">
                            <van-icon class="icon" name="service-o" size="30" />
                        </van-col>
                        <van-col span="9" class="buy" @click="gobuy">立即购买</van-col>
                        <van-col span="9" class="gocar" @click="gocart">加入购物车</van-col>
                    </van-row>
                </div>
            </div>
        </van-action-sheet>

        <!-- 优惠券单元格
        <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
        优惠券列表
        <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
            <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                @change="onChange" @exchange="onExchange" />
        </van-popup> -->
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCascaderAreaData } from '@vant/area-data';
import { getGoodsDetail } from '@/api/goodsDetail'
import { CouponCell, CouponList, showFailToast } from 'vant';
const route = useRoute()
const router = useRouter()
const goodId = route.params.id

const showyoufei = ref(false)
const showgouwufan = ref(false)
const showpeisong = ref(false)
const showfuwu = ref(false)
const showguige = ref(false)
//配送相关
const fieldValue = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }: any) => {
    showpeisong.value = false;
    fieldValue.value = selectedOptions.map((option: any) => option.text).join('/');
};
// 推荐理由
const recommendReason = ref<string[]>([])
// 包邮
const skuFreight = ref<any>({})
// 商品规格属性
const skuSpecList = ref<any[]>([])
//服务
const policyList = ref<any[]>([])
//网易严选（美好生活）
const brandInfo = ref<any>({})
//商品参数
const attrList = ref<any[]>([])
//更多图片
const itemDetail = ref<any>({})

//轮播图数据
const swpList = ref<string[]>([])
const skuList = ref<any>([])
const itemList = ref<any>({})
//获取商品数据
const getGoodsDetailHandle = async () => {
    try {
        let result = await getGoodsDetail(goodId as string)
        itemList.value = result.data.item
        let obj = result.data.item.itemDetail
        skuList.value = result.data.item.skuList
        recommendReason.value = result.data.item.recommendReason
        skuFreight.value = result.data.item.skuFreight
        skuSpecList.value = result.data.item.skuSpecList
        policyList.value = result.data.policyList
        brandInfo.value = result.data.item.brandInfo
        attrList.value = result.data.item.attrList
        itemDetail.value = result.data.item.itemDetail
        let arr = Object.keys(obj)
        arr.shift()
        arr.pop()
        swpList.value = arr.map(item => obj[item])
    } catch (error) {
        showFailToast('失败文案');
    }
}

//规格数量
const num = ref(1)

const isShowActionSheet = ref(false)
const goodsNum = ref<number>()

const gobuy = () => {
    showguige.value = true


}
const backhome = () => {
    router.push('/home')
}
const gocart = () => {
    router.push('/cart')

}
const goSearch = () => {
    router.push('/search')

}

const goodsFun = (index: number) => {
    goodsNum.value = index

}


//生命周期函数
onMounted(() => {
    getGoodsDetailHandle()
})
</script>

<style scoped lang="less">
.mt_5 {
    margin-top: 5px;
}

.goods_container {
    width: 375px;
    overflow: hidden;
    background-color: #f4f4f4;
}

//轮播图
.swiper {
    margin-top: 44px;
    height: 375px;

    img {
        width: 375px;

    }

    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 14px;

    }
}

//头部导航
.topBanner {
    width: 355px;
    height: 44px;
    line-height: 44px;
    padding: 0 8px 0 12px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #fff;

    &::after {
        content: '';
        display: block;
        clear: both;
    }

    .m-topBar a i {
        font-style: normal;
        color: black;
    }
}



//价格
.priceTitle {
    width: 360px;
    height: 74px;
    padding: 0 0 0 15px;
    background-color: #FA1E32;

    .priceleft {
        width: 285px;
        height: 66px;
        padding: 8px 0 0;
        color: #fff;

        .time {
            width: 285px;
            height: 14px;
            margin: 0 0 4px;
            font-size: 12px;
        }

        .youhui {
            width: 285px;
            height: 44px;
            line-height: 44px;
            font-size: 18px;

            .one {
                font-size: 28px;
            }

            .two {
                font-size: 20px;
            }

            i {
                font-size: 14px;
                text-decoration: line-through;
            }
        }
    }

    .priceRight {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .logoUrl {
            width: 75px;
            height: 40px;
        }
    }
}


//其他
.otherinfo {
    width: 375px;
    height: 231.5px;
    padding: 13px 0 18px 15px;
    background-color: #fff;
}

.baseInfo {
    padding-right: 20px;
}

.spmcBanner {
    width: 325px;
    height: 40px;
    margin: 8px 0 12px;
    padding: 0 10px;
    background-color: #FFF1D2;
    align-items: center;
    justify-content: space-between;
}

.spmcPrice {
    width: 200px;
    height: 34px;
}

img.iconUrl {
    width: 21px;
    height: 12px;
    margin: 0 1px 0 0;
}

.spmcDesc {
    width: 160px;
    height: 13.5px;
    font-size: 12px;
    color: #333;
    margin: 0 0 0 2px;
}

.spmcEconomizePrice {
    font-size: 14px;
    margin: 0 0 0 2px;
    color: #DD1A21;
}

.spmcBtn {
    width: 24px;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    font-size: 12px;
    color: #F3CA84;
    background-color: #12161C;
    border-radius: 35px;
}


.simpleBrandInfo {
    width: 259px;
    height: 28px;
    margin: 3px 0 2.5px;
    align-items: center;
}

.name {
    width: 259px;
    height: 35px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 2px;
}

.ziying {
    width: 32px;
    height: 16px;
    margin: 0 4px 0 0;
    text-align: center;
    font-size: 12px;
    border-radius: 25px;
    color: #fff;
    background-color: #FA1E32;
}

.brandLogo {
    width: 14px;
    height: 14px;
    margin: 0 4px 0 0;

}

span.title {
    width: 48px;
    height: 18px;
    font-size: 12px;
    color: #7f7f7f;
    margin: 0 8px 0 0;


}

.desc {
    width: 259px;
    height: 18px;
    color: #333;
    font-size: 12px;
}

.info-wrap .num {
    width: 46px;
    height: 22.5px;
    font-size: 16px;
    color: #DD1A21;
}

.com {
    width: 46px;
    height: 18px;
    font-size: 12px;
    color: #7F7F7F;
}

//推荐理由
.rcmdBanner {
    width: 325px;
    height: 60px;
    margin: 6px 0 0;
    padding: 7px 10px;
    background-color: #FAFAFA;
}

.key {
    width: 12px;
    height: 12px;
    font-size: 12px;
    text-align: center;
    margin: 0 4px 0 0;
    color: #DD1A21;
    border: 1px solid #DD1A21;
    border-radius: 50%;
}

.recommendReason {
    width: 323px;
    height: 18px;
    margin: 0 0 2px;
    font-size: 12px;
    color: #333;
}

//选项卡
.chooseCard {}

.comments {
    background-color: #fff;
}

.comment_title {
    height: 46px;
    line-height: 46px;
    font-size: 14px;

    p {
        margin: 0 15px;
        border-bottom: 1px solid #333;
    }
}

//弹框
//邮费弹框
.youfeicontent {
    padding: 16px 16px 160px;
    font-size: 14px;

    .youfeiTitle {
        padding-top: 20px;
        border-top: 1px solid #ccc;
        color: #333;
    }

    .youfeiContent {
        color: #7F7F7F;
    }
}

//购物返弹窗
.gouwucontent {
    padding: 16px 16px 160px;
    font-size: 14px;

    .rule {
        .ruleTitle {
            padding-top: 20px;
            border-top: 1px solid #ccc;
            color: #333;
        }

        .ruleContent {
            color: #7F7F7F;
        }
    }
}

//服务弹窗
.gouwufuwucontent {
    .fuwucontent {
        padding: 16px 16px 160px;
        font-size: 14px;
        padding-top: 20px;
        border-top: 1px solid #ccc;

        .rule {

            .ruleTitle {

                color: #333;
            }

            .ruleContent {
                color: #7F7F7F;
            }
        }
    }
}


//跳转
.brandInfo {
    background-color: #fff;
    width: 375px;
    height: 88px;

    .brandInfo_left {
        width: 90px;
        height: 88px;

        img {
            width: 48px;
            height: 48px;
            margin: 25px 19.5px 0 22.5px;

        }
    }

    .brandInfo_right {
        .brandInfo_title {
            width: 260px;
            height: 24px;
            font-size: 16px;
            margin: 20px 10px 8px 0;

            span {
                padding-right: 180px;
            }
        }

        .brandInfo_desc {
            width: 270px;
            height: 36px;
            font-size: 12px;
        }
    }
}

//更多
.more {
    width: 375px;

    /deep/ img {
            vertical-align: top;
            width: 375px;
            font-size: 0;
        }
}

/* 小轮播图 */
.nav_sw {
    img {
        width: 375px;
        height: 100px;
    }
}

//商品推荐
.m-attrCon {
    width: 345px;
    height: 292px;
    padding: 15px;

    .attrList {
        .tt {
            width: 345px;
            height: 14px;
            line-height: 14px;
            padding: 20px 0 12px;
            font-size: 14px;
            color: #333;


        }

        .tt_item {
            width: 330px;
            height: 22px;
            padding: 5px 15px 5px 0;
            border-top: 1px dashed #333;

            .tt_left {
                width: 74px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                color: #999;
            }

            .tt_right {
                width: 246px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                color: #333;
            }
        }
    }
}





/* 底部 */
.footer {
    width: 375px;
    height: 52px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 2;


    .icon {
        // align-items: center;
        display: block;
        text-align: center;
        line-height: 52px;
        background-color: #fff;
    }

    .buy {
        font-size: 14px;
        border-left: 1px solid #ccc;
        text-align: center;
        line-height: 52px;
        background-color: #fff;
    }

    .gocar {
        font-size: 14px;
        border-left: 1px solid #ccc;
        text-align: center;
        line-height: 52px;
        background-color: rgb(221, 26, 33, );
        color: #fff;
    }
}

.icon1111 {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
}

.content12 {
    height: 280px;
    padding: 16px 16px 160px;

    .content12_header {
        width: 345px;
        height: 99px;
        display: flex;

        .left {
            img {
                width: 98px;
                height: 99px;
                background-color: #eee;
            }
        }

        .right {
            margin-top: 32px;
            margin-left: 10px;

            .tag {
                width: 32px;
                height: 16.6px;

                .tags {

                    margin-left: 5px;
                }
            }


            .allprice {
                display: flex;

                .price {
                    font-size: 14px;
                    color: #dd1a21;

                }

                .oldprice {
                    font-size: 12px;
                    color: #999;
                    margin: 0px 0px 0px 4px;
                    padding-top: 4px;
                    text-decoration: line-through
                }
            }

            .sku {
                font-size: 14px;
                color: #333;
            }
        }
    }

    .content12_content {
        margin-top: 30px;
        width: 345px;
        // height: 224px;
        max-height: 240px;

        .spe {
            .spe_header {
                font-size: 14px;
                color: #333;
                padding: 0px 0px 6px;
            }

            .alltab {
                .tab {
                    display: inline-block;
                    position: relative;
                    vertical-align: middle;
                    border-radius: 4px;

                    padding: 0px 9px;
                    font-size: .28rem;
                    line-height: .72rem;
                    height: 0.72rem;
                    margin-right: 0.3rem;
                    margin-bottom: 0.2rem;
                    border-top: 1px solid #7f7f7f;
                    border-bottom: 1px solid #7f7f7f;
                    border-left: 1px solid #7f7f7f;
                    border-right: 1px solid #7f7f7f;

                    &.active {
                        color: rgb(201, 60, 41);
                        border-color: rgb(201, 52, 19);
                    }

                    .tabtext {
                        font-size: 14px;
                        color: #333;
                    }
                }
            }
        }

        .num {
            margin-top: 20px;

            .num_text {
                font-size: 14px;
                color: #333;
                padding: 0px 0px 6px;
            }
        }
    }

    // line-height: 15px;
    // font-size: 14px;
    // color: #7f7f7f;
}



//横向布局
.flex_base {
    display: flex;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flex_c {
    display: flex;
    flex-direction: column;
}
</style>